import React, { useState } from 'react'
import { cn } from 'clsx-for-tailwind'

export function Switch () {

    const [flag, setFlag] = useState<boolean>(false)

    return (
        <div className={'p-32 bg-slate-300'}>
            <div className={cn('w-48 h-20 bg-purple-400 rounded-2xl p-5 flex items-center duration-300',flag && 'justify-end')}
                 onClick={ () => setFlag( prevState => !prevState )}>
                <div className={'size-12 bg-white rounded-full'}></div>
            </div>
        </div>
    )
}
